<template lang="pug">
.main-view-features
    Layout(style="height:100%")
        Content
            Card(class="h-card-for-children")
                .main-view__charts
                    //- para-coord(ref="coord")
                    trend-selected(ref="trend-selected" 
                    :good_feature_name_func="good_feature_name_func"
                    :attributes_those_were_common_selected="attributes_those_were_common_selected")
                    trend(ref="trend",v-on:brush-end="$_trendOnBrushEnd"
                    :good_feature_name_func="good_feature_name_func"
                    :brush_color="brush_color")
                    raw-line(ref="raw-line"
                    :good_feature_name_func="good_feature_name_func"
                    :brush_color="brush_color")

        Sider(:width="215",class="h-sider-for-attrs") 
            Row.apply-buttons-row(type="flex")
                Button.trend(@click="$_applyTrend",  type="ghost") Trend
            Row.apply-buttons-row(type="flex")
                Button.coord(@click="$_applyCoord",  type="ghost") SelectedScatter
            .h-view-number
                | Feature List
            .attrs-container
                span(class="h-hide-select-all")
                   Checkbox(class="checkbox trend"
                    @click.prevent.native="$_selectAll4Trend"
                    :indeterminate=" attributes4trend_indeterminate"
                    :value="attributes4trend_all_selected"
                    :label="``")
                span(class="h-hide-select-all")
                    Checkbox(class="checkbox coordinate"
                     @click.prevent.native = "$_selectAll4Coord"
                     :indeterminate=" attributes4coord_indeterminate"
                     :value="attributes4coord_all_selected"
                     label="``")
                    |Select All
                p.dimension-item(v-for="(attribute_name,attribute_index) in dimensions"
                      :key="attribute_index")
                      span
                         Checkbox(comment="trend"
                           class="checkbox trend"
                            v-model="dimensions2trend[attribute_index]")
                      span
                         Checkbox(comment="coord"
                          class="checkbox coordinate"
                          v-model="dimensions2coordinate[attribute_index]")
                         span
                          | {{ good_feature_name_func(attribute_name) }}
</template>

<script>
/* eslint-disable */
// import * as d3 from "d3";
import _ from "lodash";
import axios from "axios";
import ParaCoord from "./ParaCoord";
import Trend from "./Trend";
import RawLine from "./RawLineGraph";
import TrendSelected from "./TrendSelected";

export default {
  components: { Trend, RawLine, ParaCoord, TrendSelected },
  data() {
    return {
      dimensions: [], //String[]
      dimensions2trend: [], //Boolean[]
      dimensions2coordinate: [], //Boolean[]
      refs: {
        coord: null,
        trend: null
      },
      brush_color:"rgba(220, 225, 239, 0.21)"
    };
  },
  computed: {
    starterId() {
      return this.$store.state.starterId;
    },
    attributes4coord() {
      return _.filter(this.dimensions, (e, i) => this.dimensions2coordinate[i]);
    },
    attributes4trend() {
      return _.filter(this.dimensions, (e, i) => this.dimensions2trend[i]);
    },
    attributes4coord_all_selected() {
      return this.attributes4coord.length == this.dimensions.length;
    },
    attributes4trend_all_selected() {
      return this.attributes4trend.length == this.dimensions.length;
    },
    attributes4coord_indeterminate() {
      return (
        this.attributes4coord.length > 0 &&
        this.attributes4coord.length < this.dimensions.length
      );
    },
    attributes4trend_indeterminate() {
      return (
        this.attributes4trend.length > 0 &&
        this.attributes4trend.length < this.dimensions.length
      );
    },
    attributes_those_were_common_selected(){
      return _.intersection(this.attributes4coord,this.attributes4trend)
    },
    good_feature_name_func(feature) {
      /**@param {String} feature */
      return function good_feature_name(feature) {
        let upper = feature.toUpperCase();
        if (
          feature.includes("i30") ||
          feature.includes("u30") ||
          feature.includes("p30")
        ) {
          return upper.replace(/30/g, "s");
        }
        if (
          feature.includes("i50") ||
          feature.includes("u50") ||
          feature.includes("p50")
        ) {
          return upper.replace(/50/g, "в");
        }
        if (
          feature.includes("i45") ||
          feature.includes("u45") ||
          feature.includes("p45")
        ) {
          return upper.replace(/45/g, "м");
        }
        if(feature=="speed_tail_mean"){
          return upper.replace("SPEED","Se")
        }
        return upper;
      };
    }
  },
  methods: {
    $_applyTrend() {
      this.$refs["trend"].updateAttributes([
        {
          group_name: "all_in_one",
          attribute_names: this.attributes4trend
        }
      ]);
      
      //reset rawline???
      this.$refs["raw-line"].force_reset()
    },
    $_applyCoord() {
      this.$refs["trend-selected"].updateAttributes(this.attributes4coord);
    },
    $_trendOnBrushEnd(extent, attribute, lengthOfLinePoints) {
      // debugger;
      this.$refs["raw-line"].drawByExtentAndAttr(
        extent,
        attribute,
        lengthOfLinePoints
      );
    },
    $_selectAll4Coord() {
      if (this.attributes4coord_all_selected) {
        this.dimensions2coordinate = this.dimensions.map($ => false);
      } else {
        this.dimensions2coordinate = this.dimensions.map($ => true);
      }
    },
    $_selectAll4Trend() {
      if (this.attributes4trend_all_selected) {
        this.dimensions2trend = this.dimensions.map($ => false);
      } else {
        this.dimensions2trend = this.dimensions.map($ => true);
      }
    }
  },
  async created() {
    /*
    this.$http
      .get("/starter/feature/groupattrs/", {
        params: {
          starterId: this.starterId
        }
      })
      */
    // let axiosClient = axios.create({ baseURL: "/" });
    let axresp = await axios.get("/starter/feature/list/");
    this.dimensions = axresp.data["features"];
    this.dimensions2trend = this.dimensions.map($ => false);
    this.dimensions2coordinate = this.dimensions.map($ => false);
  },
  mounted() {},
  watch: {
    starterId() {
      this.dimensions2trend = [];
      this.dimensions2coordinate = [];
    }
  }
};
</script>

<style lang="less" scoped>
@import "color-define.less";

.main-view-features {
  width: 100%;
  height: 708px;
  p.dimension-item {
    text-align: left;
  }
  .apply-buttons-row {
    padding-left: 10px;
    button {
      display: block;
      margin-top: 5px;
      margin-bottom: 5px;
      padding-top: 2px;
      padding-bottom: 2px;
      // width: 100%;
      border-radius: 0;
      background-color: #fff;
      color: #b5b5b5;
      width: 120px;
      border-radius: 4px;
      &.trend {
        // color: @trend-color;
        &:hover {
          background-color: @trend-color;
          color: white;
        }
      }
      &.coord {
        // color: @coord-color;
        &:hover {
          background-color: @coord-color;
          color: white;
          border-color: @coord-color;
        }
      }
    }
  }
  .attrs-container {
    height: 708px;
    padding-left: 10px;
    padding-top: 5px;
    overflow: auto;
    background-color: #fff;
    font-size: 12px;
    span.h-hide-select-all {
      display: none;
    }
  }
  .recommended-attrs-container {
    position: absolute;
    top: 32px;
    left: 0;
    font-size: 12px;
    width: 100%;
    // height: 100%;
    min-height: 240px;
    max-height: 438px;
    background-color: #f8f8f9;
    transition: 0.5s;
    &.close {
      transform: translate(100%, 0);
    }
    @swidth: 25px;
    .trigger {
      position: absolute;
      top: 0;
      height: 100px;
      width: @swidth;
      .recommend-trigger-text {
        text-shadow: 0px 0px 5px #2d8cf0, 0px 0px 4px #0043fc;
        color: white;
      }
      & > .trigger-btn {
        width: 100%;
        padding-top: 10px;
        text-align: center;
        background-color: #d3d7db;
        height: 100%;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        cursor: pointer;
      }
      &.sopen {
        position: absolute;
        left: -@swidth;
        width: @swidth;
        top: 0;
      }
    }
    .panel {
      margin-left: 5px;
      padding-top: 10px;
      p.dimension-item {
        padding-top: 2px;
        margin-left: 16px;
      }
    }
  }
}
</style>
<style lang="less">
@import "color-define.less";
.main-view-features {
  .h-card-for-children {
    width: 100%;
    height: 100%;
    &.ivu-card {
      // border:2px solid blue;
      .ivu-card-body {
        padding: 0;
      }
    }
  }
  .h-sider-for-attrs {
    background-color: white;
    border-left: 0px solid #e2e2e2;
    padding-top: 10px;
    .attrs-container {
      .ivu-collapse > .ivu-collapse-item > .ivu-collapse-header {
        text-align: left;
        padding-left: 16px;
        & > i.ivu-icon {
          margin-right: 15px;
        }
      }
      .ivu-collapse {
        border-radius: 0;
        border-left: 0px;
        .ivu-collapse-content {
          .ivu-collapse-content-box {
            p.dimension-item {
              color: #a3a3a3;
              label.ivu-checkbox-wrapper {
                margin-right: 4px;
              }
            }
          }
        }
      }
    }
  }

  .checkbox {
    @color: @trend-color;
    &.trend {
      .ivu-checkbox-inner {
        background-color: @color;
        opacity: 0.3;
      }
      .ivu-checkbox-checked .ivu-checkbox-inner {
        border-color: @color;
        background-color: @color;
        opacity: 1;
      }
      .ivu-checkbox-indeterminate .ivu-checkbox-inner {
        border-color: @color;
        background-color: @color;
        opacity: 1;
      }
    }
    &.coordinate {
      @color: @coord-color;
      .ivu-checkbox-inner {
        background-color: lighten(@color, 0.1);
        opacity: 0.3;
      }
      .ivu-checkbox-checked .ivu-checkbox-inner {
        border-color: @color;
        background-color: @color;
        opacity: 1;
      }
      .ivu-checkbox-indeterminate .ivu-checkbox-inner {
        border-color: @color;
        background-color: @color;
        opacity: 1;
      }
    }
  }
}
</style>
<style lang="scss">
.main-view-features {
  // background-color: red;
  .h-sider-for-attrs {
    // background-color: red;
    $gray: #b5b5b5;
    $hwidth: 98px;
    .h-view-number {
      margin-bottom: 5px;
      width: $hwidth;
      margin-bottom: 8px;
      font-size: 12px;
      display: inline-block;
      border-bottom: solid 1px $gray;
      margin-left: 10px;
      margin-top: 10px;
    }
    .h-button-group {
      padding-left: 10px;
      margin-bottom: 10px;
      &.ivu-btn-group {
        .ivu-btn {
          padding: 0px 6px;
          &:not(:first-child) {
            margin-left: 5px;
          }
        }
        .ivu-btn-primary {
          background-color: $gray;
          border-color: $gray;
          &:focus {
            box-shadow: 0 0 0 0px $gray;
          }
        }
        .ivu-btn-ghost {
          color: $gray;
        }
        .ivu-btn-ghost:focus {
          box-shadow: 0 0 0 0px $gray;
        }
        .ivu-btn-ghost:hover {
          color: $gray;
          border-color: $gray;
        }
        .ivu-btn-primary ~ .ivu-btn {
          border-color: $gray;
        }
      }
    }
  }
}
</style>